﻿<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-family: "Trebuchet MS"
}
body {
  font-family: "Times New Roman"
}
</style>
</head>
<body>
<h1>Rocket Animation Pilot with SVG</h1>
<p>Click reload button of the browser to repeat this animation.</p>
<svg width="598" height="428" style="border: solid 1px lightgray">
  <defs>
    <g id="g1">
      <image xlink:href="stars.png" x="0" y="0" width="598" height="428" />
    </g>
    <g id="g2">
      <polygon points="92,0 22,96 162,96" 
        style="fill:#752424;stroke:#000000;stroke-width:2"/>
      <polygon points="21,194 0,273 42,273" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <polygon points="162,193 142,273 183,273" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <polygon points="93,189 52,259 134,259" 
        style="fill:#1f1f1f;stroke:#000000;stroke-width:2"/>
      <rect x="22" y="97" width="141" height="142" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <polygon points="93,192 73,273 114,273" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <ellipse cx="93" cy="145" rx="41" ry="43" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <ellipse cx="93" cy="145" rx="33" ry="34" 
        style="fill:#217dbb;stroke:#000000;stroke-width:2"/>
      <ellipse cx="37" cy="220" rx="7" ry="8" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <ellipse cx="64" cy="221" rx="7" ry="7" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <ellipse cx="122" cy="221" rx="6" ry="7" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <ellipse cx="146" cy="220" rx="5" ry="6" 
        style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
      <ellipse cx="93" cy="351" rx="28" ry="73" 
        style="fill:#ff0f0f;stroke-width:0"/>
      <ellipse cx="94" cy="337" rx="18" ry="51" 
        style="fill:#ff930f;stroke-width:0"/>
      <ellipse cx="94" cy="316" rx="9" ry="25" 
        style="fill:#ffef0f;stroke-width:0"/>
    </g>
  </defs>
  <rect x="0" y="0" width="598" height="428"
      fill="#ffffff" stroke="none">
    <animate attributeName="fill" attibuteType="CSS" begin="0s"
     dur="1.5s" from="#ffffff" to="#000066" />
    <animate attributeName="fill" attibuteType="CSS" begin="1.5s"
     dur="1.5s" from="#000066" to="#000000" />
    <animate attributeName="fill" attibuteType="CSS" begin="3s"
     dur="9s" from="#000000" to="#000000" />
    <animate attributeName="fill" attibuteType="CSS" begin="12s"
     dur="1.5s" from="#000000" to="#000066" />
    <animate attributeName="fill" attibuteType="CSS" begin="13.5s"
     dur="1.5s" from="#000066" to="#ffffff" />
  </rect>
  <use x="-598" y="-428" xlink:href="#g1">
    <animate attributeName="y" begin="0s"
     dur="3s" from="-428" to="0" />
    <animate attributeName="y" begin="3s"
     dur="9s" from="0" to="0" />
    <animate attributeName="y" begin="12s"
     dur="3s" from="0" to="-428" />
    <animate attributeName="x" begin="6s"
     dur="3s" from="-598" to="0" />
  </use>
  <use x="0" y="-428" xlink:href="#g1">
    <animate attributeName="y" begin="0s"
     dur="3s" from="-428" to="0" />
    <animate attributeName="y" begin="3s"
     dur="9s" from="0" to="0" />
    <animate attributeName="y" begin="12s"
     dur="3s" from="0" to="-428" />
    <animate attributeName="x" begin="6s"
     dur="3s" from="0" to="598" />
  </use>
  <use x="0" y="0" xlink:href="#g1">
    <animate attributeName="y" begin="0s"
     dur="3s" from="0" to="428" />
    <animate attributeName="y" begin="3s"
     dur="9s" from="428" to="428" />
    <animate attributeName="y" begin="12s"
     dur="3s" from="428" to="0" />
    <animate attributeName="x" begin="6s"
     dur="3s" from="0" to="598" />
  </use>
  <use x="208" y="154" xlink:href="#g2">
    <animate attributeName="y" begin="0s"
     dur="3s" from="154" to="78" />
    <animate attributeName="y" begin="3s"
     dur="9s" from="78" to="78" />
    <animate attributeName="y" begin="12s"
     dur="3s" from="78" to="154" />
    <animateTransform attributeName="transform" begin="3s"
     dur="3s" type="rotate" from="0 300 214" to="-90 300 214" />
    <animateTransform attributeName="transform" begin="6s"
     dur="3s" type="rotate" from="-90 300 214" to="-90 300 214" />
    <animateTransform attributeName="transform" begin="9s"
     dur="3s" type="rotate" from="-90 300 214" to="0 300 214" />
  </use>
</svg>
<hr>
<p>Copyright &copy; 2015 Nonki Takahashi.<br><br>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br /><small>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</small></p>
</body>
</html>
